<template>
  <div>
    <!-- 头部导航栏 -->
    <div class="header">
      <i class="el-icon-arrow-left"></i>
      <div class="div"><input type="text" /></div>
      <i class="el-icon-menu"></i>
    </div>
    <!-- 切换导航栏 -->
    <div class="nav">
      <span
        v-for="(item, index) in nav"
        :key="index"
        :class="{ active: flag == index }"
        @click="fn(index)"
        >{{ item }}</span
      >
    </div>
    <!-- 筛选 -->
    <div class="select">
      <div class="tag">
        <span v-for="(item, index) in list" :key="index">{{ item }}</span>
      </div>
      <div @click="drawer = true" class="btn">筛选</div>
    </div>
    <!-- 中间粉色盒子 -->
    <div class="middle">
      <div class="boxx">点击筛选<span>618</span>活动商品</div>
    </div>
    <!-- 展示列表 -->
    <div class="shoplist">
      <ul>
        <li v-for="item in shoplist" :key="item.id">
          <div class="pic">
            <img :src="item.image" alt="" />
          </div>
          <div class="info-shop">
            <p>{{ item.name }}</p>
            <p>{{ item.description }}</p>
            <p style="color: red">￥{{ item.price }}</p>
          </div>
          <span> </span>
        </li>
      </ul>
    </div>
    <!--  筛选 -->
    <el-drawer
      title="我是标题"
      size="300px"
      :visible.sync="drawer"
      :with-header="false"
    >
      <div style="margin-left: 10px">
        <div class="list">
          <div
            v-for="item in arr"
            class="listItem"
            :key="item"
            :class="{ highlighted: item === selectedItem }"
            @click="selectItem(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <h3>价格区间</h3>
        <div class="price">
          <input type="text" v-model="price" />
          -
          <input type="text" v-model="prices" />
        </div>
        <h3>屏幕尺寸</h3>
        <div class="list">
          <div
            v-for="item in size"
            class="listItem2"
            :key="item"
            :class="{ highlighted: item === selectedItem2 }"
            @click="selectItem2(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <h3>内存容量</h3>
        <div class="list">
          <div
            v-for="item in capacity"
            class="listItem3"
            :key="item"
            :class="{ highlighted: item === selectedItem3 }"
            @click="selectItem3(item)"
          >
            <div>{{ item }}</div>
          </div>
        </div>
        <el-button style="margin-top: 10px; margin-left: 200px" @click="confirm"
          >确定</el-button
        >
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.getlist();
  },
  data() {
    return {
      flag: 0,
      list: ["京东物流", "新品", "PLUS专享", "二手", "品牌"],
      nav: ["综合推荐", "销量", "价格", "小时达"],
      shoplist: [],
      // 筛选弹框的状态
      drawer: false,
      // 筛选头部数据
      arr: [
        "分期免息",
        "二手",
        "货到付款",
        "京东超市",
        "211限时达",
        "促销",
        "同城速配",
        "包邮",
      ],
      // 屏幕尺寸
      size: ["13.0英寸以下", "13.0-13.9英寸", "14.0-14.9英寸"],
      // 内存容量
      capacity: [
        "4GB",
        "6GB",
        "8GB",
        "9GB",
        "12GB",
        "16GB",
        "20GB",
        "24GB",
        "32GB",
        "36GB",
        "40GB",
        "64GB",
      ],
      // 点击头部的数据
      selectedItem: "",
      //点击屏幕尺寸的数据
      selectedItem2: "",
      //点击内存容量的数据
      selectedItem3: "",
      // 价格区间左
      price: "",
      // 价格区间右
      prices: "",
    };
  },
  mounted() {
    this.huoqu();
  },
  methods: {
    fn(index) {
      // 对flag进行取反操作
      this.flag = index;
    },
    async getlist() {
      const { data } = await axios.get("./good.json");
      console.log(data);
      this.shoplist = data;
    },
    // 获取到点击头部的数据
    selectItem(item) {
      this.selectedItem = item;
    },
    // 获取到点击屏幕尺寸的数据
    selectItem2(item) {
      this.selectedItem2 = item;
    },
    // 获取到点击内存容量的数据
    selectItem3(item) {
      this.selectedItem3 = item;
    },
    // 确定按钮
    confirm() {
      console.log(123);

      console.log(this.datas, "数据");
      let obj = {};
      // 判断是否为selectedItem
      if (this.selectedItem) {
        console.log(this.selectedItem, "7777");
        obj["selectedItem"] = this.selectedItem;
      }
      // 判断是否为selectedItem2
      if (this.selectedItem2) {
        console.log(this.selectedItem2, "88888");
        obj["selectedItem2"] = this.selectedItem2;
      }
      // 判断是否为selectedItem3
      if (this.price !== "" && this.prices !== "") {
        obj["price"] = [this.price, this.prices];
      }
      // 多条件查询
      let aa = this.shoplist.filter((item) => {
        return Object.keys(obj).every((key) => {
          if (Array.isArray(obj[key])) {
            return item[key] >= obj[key][0] && item[key] <= obj[key][1];
          } else {
            return item[key] === obj[key];
          }
        });
      });
      this.shoplist = aa
      console.log(aa, "cvb");
    },
  },
};

</script>

<style scoped>
/* 头部导航 */
.header {
  padding: 10px;
  background: #f8f8f8;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.header i {
  width: 10%;
  margin-top: 5px;
}
.div {
  width: 100%;
}

.header input {
  width: 90%;
  height: 25px;
  border: 1px solid #f6c5bd;
  border-radius: 50px;
}
/* 综合筛选导航 */
.nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.nav span {
  padding: 5px 10px;
}
.active {
  border-bottom: 2px solid red;
  font-weight: 900;
}

.select {
  width: 100%;
  position: relative;
}
.tag {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.tag span {
  background: #ccc;
  border-radius: 50px;
  padding: 5px 10px;
}
/* 固定在右边 */
.btn {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 10px;

  background: #fff;
  width: 55px;
  text-align: center;
}

.middle {
  width: 100%;
}
.boxx {
  width: 80%;
  background: #fceeeb;
  margin: 10px auto;
  padding: 5px 10px;
  text-align: center;
  border-radius: 50px;
}
.boxx span {
  color: red;
  font-weight: 900;
}

.shoplist img {
  width: 100px;
  margin-right: 10px;
}
.shoplist ul {
  list-style: none;
}
.shoplist li {
  padding: 10px;
}
.shoplist {
  overflow: hidden;
}
.pic {
  float: left;
}

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 10px;
}
.listItem {
  width: 20vw;
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem2 {
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem3 {
  width: 20vw;
  margin: 5px 10px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: rgb(242, 242, 242);
  border-radius: 10px;
}
.listItem:last-child {
  margin-right: 108px;
}
.price {
  display: flex;
}
input {
  width: 100px;
  outline: none;
  border: 0;
  background: rgb(240, 240, 240);
  border-radius: 10px;
  padding-left: 10px;
}
.highlighted {
  background-color: yellow;
}
</style>
